<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>面向对象版_滑动门</title>
    <link rel="stylesheet" type="text/css" href="CSS/base.css" />
    <link rel="stylesheet" type="text/css" href="CSS/solidBox.css" />
    <script type="text/javascript" src="JS/tool.domElement.js"></script>
    <script type="text/javascript">
      //面向过程  --- > 鼠标的事件 执行函数 
      //面向对象  --- > 选项卡

      // 属性 --- > 标题对象  内容对象 
      // 方法 --- > 绑定事件的方法 显示内容标题高亮的方法 

      
    
    </script>
  </head>

  <body>
    <!--第1个盒子-->
    <div id="solidBox" class="solidBox">
      <h3 class="solidBox_title clearfix">
        <strong class="hover">足球</strong>
        <strong>篮球</strong>
        <strong>其他</strong>
      </h3>
      <div class="solidBox_content">
        <div style="display: block">足球对应的内容</div>
        <div style="display: none">篮球对应的内容</div>
        <div style="display: none">其他对应的内容</div>
      </div>
    </div>
   
  </body>
</html>
